<template>
  <div class="echarts-pie-index" ref="chartsPie"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { curTheme } from './theme'

const props = defineProps({
  list: {
    type: Array,
    default: []
  },

  // 系列名称
  seriesName: String,

  // list 列表中的 key 值
  listKey: {
    type: String,
    default: 'label'
  },

  color: {
    type: Array,
    default: () => [
      '#19C9D9',
      '#3F81FE',
      '#6FDCFF'
    ]
  }
})

const total = ref(0)

const chartsPie = ref(null)

const myChart = ref(null)

const options = {
  color: props.color,
  tooltip: {
    trigger: 'item',
    confine: true,
    backgroundColor: curTheme.tooltipBg,
    borderColor: curTheme.tooltipBg,
    textStyle: {
      color: curTheme.color
    }
  },
  legend: {
    orient: 'vertical',
    right: '10%',
    top: 'middle',
    icon: 'circle',
    textStyle: {
      color: curTheme.color,
      rich: {
        a: {
          color: curTheme.richColor,
          fontSize: '14px',
        },
        b: {
          padding: [0, 20, 0, 10],
          fontSize: '14px',
        },
        c: {
          fontSize: '14px',
        }
      }
    },
    borderWidth: 0,
    formatter: (name) => {
      const curItem = props.list?.find(item => item[props.listKey] === name)
      return curItem ? `{a|${ name }}{b|${curItem.value}}{c|${ total.value ? ((curItem.value / total.value) * 100).toFixed(0) : 0 }%}` : ''
    }
  },
  series: [
    {
      name: props.seriesName,
      type: 'pie',
      center: ['28%', '50%'],
      radius: ['40%', '65%'],
      avoidLabelOverlap: true,
      itemStyle: {
        borderColor: curTheme.bg,
        borderWidth: 3
      },
      label: {
        show: true,
        formatter: '',
        position: 'center',
        rich: {
          a: {
            fontSize: '24px',
            color: '#247EFF',
            fontWeight: 'bold',
            padding: [6, 0]
          },
          b: {
            color: curTheme.color,
            fontSize: '16px',
          }
        }
      },
      data: []
    },
  ]
}

onMounted(() => {
  // echarts 实例对象不能转为代理对象会影响一些属性
  myChart.value = markRaw(echarts.init(chartsPie.value))

  window.addEventListener('resize', function() {
    myChart.value.resize()
  })
})

onUnmounted(() => {
  window.removeEventListener('resize', function() {
    myChart.value.resize()
  })
})

watch(() => props.list, (newVal) => {
  total.value = newVal?.length > 0 ? (newVal.reduce((acc, cur) => {
    return acc + parseInt(cur.value)
  }, 0)) : 0

  options.series[0].label.formatter = [
    `{a|${ total.value.toString() }}`,
    '{b|总计}'
  ].join('\n')

  options.series[0].data = newVal.map(item => {
    return {
      name: item[props.listKey],
      value: item.value
    }
  })

  nextTick(() => {
    myChart.value?.clear()
    if(newVal.length > 0) {
      myChart.value?.setOption(options)
    } else {
      myChart.value?.setOption(curTheme.notDataOption)
    }
  })
}, {
  deep: true,
  immediate: true
})
</script>
